:root {
  --sl-content-width: 48rem;
  --sl-text-h1: 3.5rem;
  --sl-white: #f9f9f9;
  --sl-color-white: #f9f9f9;
  --bg-gray: #1f1f1f1f;
  --sl-color-black: #0d0d0d;
  --sl-color-accent: var(--color-accent-500) !important;
  --sl-color-accent-high: var(--color-accent-950) !important;
  --sl-color-gray-1: #e5e7eb;
  --sl-color-gray-2: #d1d5db;
  --sl-color-gray-3: #9ca3af;
  --sl-color-gray-4: #4b5563;
  --sl-color-gray-5: #374151;
  --sl-color-gray-6: #1f2937;
}

:root[data-theme="light"] {
  --sl-color-accent: var(--color-accent-500) !important;
  --sl-accent-color: var(--color-accent-500) !important;
  --dark-blue: var(--color-accent-950);
  --sl-color-text-accent: var(--color-accent-700);
  --sl-color-accent-high: var(--color-accent-950) !important;
  --sl-color-bg: var(--bg-white);
  --sl-rapide-ui-header-bg-color: var(--bg-gray);
  --sl-color-bg-sidebar: var(--sl-white);
  --sl-color-text: var(--sl-gray);
  --logo-text-color: #000000;
  --anchor-icon-filter: invert(0);
  --nav-selected-color: var(--color-accent-950);
}

:root[data-theme="dark"] {
  --sl-color-accent: var(--color-accent-500) !important;
  --sl-accent-color: var(--color-accent-500) !important;
  --sl-color-black: var(--color-neutral-900);
  --dark-blue: var(--color-accent-500);
  --sl-color-text-accent: var(--color-accent-500);
  --sl-color-accent-high: var(--color-accent-500) !important;
  --sl-color-bg: var(--bg-gray);
  --sl-rapide-ui-header-bg-color: var(--bg-gray) / 0.8;
  --sl-color-bg-sidebar: var(--bg-gray) / 0.8;
  --sl-color-text: var(--sl-white);
  --logo-text-color: #f9f9f9f9;
  --anchor-icon-filter: invert(1);
  --nav-selected-color: var(--color-accent-500);
  --ec-frm-edBg: #17191e !important;
}

.sidebar-content {
  height: 100%;
  min-height: max-content;
  padding: 0;
  flex-direction: column;
  gap: 1rem;
  & section {
    padding: 1rem var(--sl-sidebar-pad-x) 0;
  }
}

.tablist-wrapper {
  & ul {
    padding: 0;
    padding-top: 3px;
    margin-bottom: 5px;
  }
}

a[href="#sidebar-panel-0"],
a[href="#sidebar-panel-1"] {
  border: unset;
}

h1 a,
h2 a,
h3 a,
h4 a {
  color: var(--logo-text-color) !important;
}

.social-icons a {
  color: var(--logo-text-color);
}

.site-title {
  gap: 4px;
  color: white;
}

code[dir="auto"] {
  border-radius: 0.25rem;
}

h1 > a,
h2 > a,
h3 > a,
h4 > a,
h5 > a {
  text-decoration: none;
}

h1 > a:hover::after,
h2 > a:hover::after,
h3 > a:hover::after,
h4 > a:hover::after,
h5 > a:hover::after {
  content: "#";
  width: 0.5em;
  height: 0.5em;
  color: #f9f9f9;
  margin-left: 0.25rem;
  display: inline-block;
  background-size: contain;
  background-repeat: no-repeat;
}

li a[aria-current="page"] {
  color: var(--nav-selected-color);
}
ul[data-astro-source-file$="@lorenzo_lewis/starlight-utils/components/NavLinks.astro"] {
  margin-left: 10px;
}

a[aria-current="true"]
  span[data-astro-source-file$="/starlight/components/TableOfContents/SidebarSublist.astro"] {
  color: var(--nav-selected-color);
}

figure figcaption span {
  letter-spacing: 0.02em !important;
}

/* controls line height of code snippets in docs */
.expressive-code figure pre code {
  line-height: 1.45rem;
}

.site-title span {
  /* color: var(--logo-text-color); */
}

h1 > a {
  font-size: 2.5rem;
}
